<template>
  <view class="loginBox">
    <view class="wrapForm pzForm">
      <view class="bgLine pB30 pL15">
        <view class="font24 bold">你好!</view>
        <!-- #ifdef MP-COMPANY -->
        <view class="font14 mT5 u-9">欢迎注册灵工企业端</view>
        <!-- #endif -->
        <!-- #ifdef MP-USER -->
        <view class="font14 mT5 u-9">欢迎注册灵工用户端</view>
        <!-- #endif -->
        <!-- #ifdef MP-ECONOMIC  -->
        <view class="font14 mT5 u-9">欢迎注册灵工经济人端</view>
        <!-- #endif -->
      </view>
      <view class="wrapFormBody pL15 pR15 pT25">
        <u-form
          :label-width="300"
          class="xf-wrap-form"
          ref="dataForm"
          :rules="rules"
          :model="formData"
        >
          <u-form-item
            :required="true"
            :label-style="{ 'font-size': '36rpx' }"
            :label-position="'top'"
            label="手机号"
            prop="phone"
          >
            <u-input placeholder="请填写" v-model="formData.phone" />
          </u-form-item>
          <u-form-item
            :required="true"
            :label-style="{ 'font-size': '36rpx' }"
            :label-position="'top'"
            label="验证码"
            prop="code"
          >
            <view class="flex jst-between">
              <u-input placeholder="请填写" v-model="formData.code" />
              <view
                v-if="!isCounting"
                @click="sendCode"
                class="u_theme_color"
                >{{ sendCodeText }}</view
              >
              <view v-else>
                <text class="u_theme_color">{{ sendCodeText }}</text>
                <text>秒后重新发送</text>
              </view>
            </view>
          </u-form-item>
          <u-form-item
            :required="true"
            :label-style="{ 'font-size': '36rpx' }"
            :label-position="'top'"
            label="用户密码"
            prop="password"
          >
            <u-input
              placeholder="请填写"
              type="password"
              v-model="formData.password"
            />
          </u-form-item>
          <view class="flex jst-between mT20">
            <view
              >已有账号，<text class="u_theme_color" @click.stop="xf.goBack()"
                >立即登录</text
              ></view
            >
          </view>
          <button type="primary" class="btnLogin mT30" @click="siginIn">
            <view class="marL20 font34">注册</view>
          </button>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import {
  licenseFreelogin,
  loginAccount,
  xfSysUserSms,
  registeredPassword,
  phoneLogin,
} from "@/api/common.js";
import define from "@/utils/define.js";
import { chatUserInfo } from "@/api/chat.js";
export default {
  data() {
    return {
      formData: {
        phone: "",
        password: "",
        code: "",
        terminalType: "10",
      },
      rules: {},
      sendCodeText: "发送验证码",
      isCounting: false,
      count: 60,
    };
  },
  onShow() {},
  methods: {
    sendCode() {
      if (this.isCounting) return;

      // 验证手机号是否合法
      const phonePattern = /^1[3-9]\d{9}$/;
      if (!phonePattern.test(this.formData.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }
      // 调用发送验证码的接口
      xfSysUserSms({ mobile: this.formData.phone }).then((res) => {
        uni.showToast({
          title: "验证码发送成功",
          icon: "none",
        });
        // 开始倒计时
        this.isCounting = true;
        this.count = 60;
        this.sendCodeText = `${this.count}`;

        const interval = setInterval(() => {
          if (this.count > 0) {
            this.count--;
            this.sendCodeText = `${this.count}`;
          } else {
            clearInterval(interval);
            this.isCounting = false;
            this.sendCodeText = "发送验证码";
          }
        }, 1000);
      });
    },
    siginIn() {
      if (!this.formData.phone) {
        this.xf.onlineUtils.toast("请输入用户名");
      } else if (!this.formData.code) {
        this.xf.onlineUtils.toast("请输入验证码");
      } else if (!this.formData.password) {
        this.xf.onlineUtils.toast("请输入用户密码");
      } else {
        phoneLogin({
          phone: this.formData.phone,
          captcha: this.formData.code,
          orgCode: "",
          terminalType: this.formData.terminalType, //设备10移动端
          izRegister: "",
        }).then((res) => {
          console.log(res, "res");
          const { result } = res;
          registeredPassword({
            phone: this.formData.phone,
            captcha: this.formData.code,
            password: this.formData.password,
            token: result.token,
          })
            .then((res) => {
              if (res.code == 200) {
                this.xf.onlineUtils.toast('注册成功');
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;

  background: linear-gradient(0deg, #f7f8fb, #e1eeff);
  /* #ifdef MP-ECONOMIC */
  background: linear-gradient(0deg, #f7f8fb, #ebfcff);
  /* #endif */
}
</style>
<style scoped lang="scss">
.wrapForm {
  height: 100%;
  background: #fff;

  .wrapFormBody {
    margin-top: -30rpx;
    border-radius: 40rpx 40rpx 0 0;
    background: #fff;
  }
}

.loginBox {
  height: 100%;
}

.bgLine {
  background-color: #e1eeff;
  width: 100%;
  /* #ifdef MP-ECONOMIC */
  background-color: #ebfcff;
  /* #endif */
}

.loginBody {
  padding-top: 128rpx;
}

.logo {
  width: 140rpx;
  height: 140rpx;
  border-radius: 30rpx;
}

.btnLogin {
  width: 670rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: #386aff;
  /* #ifdef  MP-ECONOMIC */
  background: #00a0c6;
  /* #endif */
  font-size: 32rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
}

.zhBtn {
  width: 670rpx;
  height: 100rpx;
  cursor: pointer;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #3291f8;
  color: #3291f8;
  /* #ifdef  MP-ECONOMIC */
  border: 2rpx solid #00a0c6;
  color: #00a0c6;
  /* #endif */
  font-size: 32rpx;
  line-height: 100rpx;
  text-align: center;
  margin-top: 30rpx;
}
</style>
